<template>
  <div style="border: 0px solid black">
    <van-nav-bar title="xx商城">
      <template #right>
        <van-cell is-link @click="showPopup22">
          <van-icon name="wap-nav" />
        </van-cell>
      </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
      <van-swipe-item>
        <van-grid :column-num="3">
          <van-grid-item icon="fire-o" text="文字1">
            <div>
              <van-card style="width: 105px; float: left"
                thumb="https://img2.baidu.com/it/u=1189043290,351250945&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501" />
            </div>
          </van-grid-item>
          <van-grid-item icon="fire-o" text="文字1">
            <van-image width="100" height="100"
              src="https://img1.baidu.com/it/u=577597632,3187271167&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
          </van-grid-item>
          <van-grid-item icon="fire-o" text="文字1">
            <van-image width="100" height="100"
              src="https://img0.baidu.com/it/u=1091130741,2479311585&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=762" />
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :column-num="3">
          <van-grid-item icon="fire-o" text="文字1">
            <van-image width="100" height="100"
              src="https://img1.baidu.com/it/u=2335835412,2056653919&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504" />
          </van-grid-item>
          <van-grid-item icon="fire-o" text="文字1">
            <van-image width="100" height="100"
              src="https://img0.baidu.com/it/u=3030932713,2410511816&fm=253&fmt=auto&app=138&f=JPEG?w=597&h=500" />
          </van-grid-item>
          <van-grid-item icon="fire-o" text="文字1">
            <van-image width="100" height="100"
              src="https://img2.baidu.com/it/u=1762993036,3220326198&fm=253&fmt=auto&app=138&f=JPEG?w=330&h=250" />
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>

    <!--轮播 -->
    <van-divider>百亿补贴</van-divider>
    <!--分割线 -->
    <div style="border: 1px solid orangered">
      <div>
        <van-card style="width: 123px; float: left"
          thumb="https://img2.baidu.com/it/u=1189043290,351250945&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501" />
      </div>
      <div>
        <van-card style="width: 123px; float: left"
          thumb="https://1.s91i.faiusr.com/4/AFsIoNLFAhAEGAAg1ci-gAYopuzLNjCgBjigBg!500x500.png.webp?_tm=3&v=1629431760" />
      </div>
      <div>
        <van-card style="width: 123px; float: left"
          thumb="https://1.s91i.faiusr.com/4/AFsI-7eaAhAEGAAg5KGb-AUo9vvp3gYwoAY4oAY!500x500.png.webp?_tm=3&v=1640097369" />
      </div>
    </div>
    <van-divider style="clear: both">有好货</van-divider>
    <!--分割线 -->
    <div style="border: 1px solid orangered">
      <div>
        <van-card style="width: 123px; float: left"
          thumb="https://img0.baidu.com/it/u=423955007,1385464698&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501" />
      </div>
      <div>
        <van-card style="width: 123px; float: left"
          thumb="https://1.s91i.faiusr.com/4/AFsI9JyJARAEGAAg2ajy7gUo4tClvAIwoAY4oAY!500x500.png.webp?_tm=3&v=1615973031" />
      </div>
      <div>
        <van-card style="width: 123px; float: left"
          thumb="https://1.s91i.faiusr.com/4/AFsIg6hEEAQYACDmhvLlBSjGnbrnBjCgBjigBg!500x500.png.webp?_tm=3&v=1619417545" />
      </div>
    </div>
    <van-divider style="clear: both"></van-divider>
    <!--分割线 -->
    <div>
      <!-- -----------------------------------------商品1------------------------------------------------------ -->
      <div>
        <van-cell is-link @click="showPopup1">
          <van-card price="99.00" desc="双肩包" title="双肩包"
            thumb="https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119"
            origin-price="299.00" />
        </van-cell>
        <van-popup v-model="show1" style="height: 400px; width: 375px">
          <van-image width="375" height="355"
            src="https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119" />
          <div>
            <van-goods-action>
              <van-goods-action-icon icon="like-o" text="收藏" @click="shouchang" />
              <van-goods-action-button type="warning" text="购物车" @click="addgwc1(1)" />
              <van-goods-action-button type="danger" text="购买" @click="GM(1)" />
            </van-goods-action>
          </div>
        </van-popup>
      </div>
      <!-- ----------------------------------------商品1------------------------------------------------------- -->
      <!-- -----------------------------------------商品2------------------------------------------------------ -->
      <div>
        <van-cell is-link @click="showPopup2">
          <van-card price="99.00" desc="双肩包2" title="双肩包2"
            thumb="https://1.s91i.faiusr.com/4/AFsIyY_KAhAEGAAg56abgwYogPetzwMwoAY4oAY!500x500.png.webp?_tm=3&v=1629432638"
            origin-price="299.00" />
        </van-cell>
        <van-popup v-model="show2" style="height: 400px; width: 375px">
          <van-image width="375" height="355"
            src="https://1.s91i.faiusr.com/4/AFsIyY_KAhAEGAAg56abgwYogPetzwMwoAY4oAY!500x500.png.webp?_tm=3&v=1629432638" />
          <div>
            <van-goods-action>
              <van-goods-action-icon icon="like-o" text="收藏" @click="shouchang" />
              <van-goods-action-button type="warning" text="购物车" @click="addgwc1(2)" />
              <van-goods-action-button type="danger" text="购买" @click="GM(2)"  />
            </van-goods-action>
          </div>
        </van-popup>
      </div>
      <!-- -----------------------------------------商品2------------------------------------------------------ -->
      <!-- -----------------------------------------商品3------------------------------------------------------ -->
      <div>
        <van-cell is-link @click="showPopup3">
          <van-card price="99.00" desc="保温杯" title="保温杯"
            thumb="https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg6OOV-AUolOO0gwUwoAY4oAY!500x500.png.webp?_tm=3&v=1629427346"
            origin-price="299.00" />
        </van-cell>
        <van-popup v-model="show3" style="height: 400px; width: 375px">
          <van-image width="375" height="355"
            src="https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg6OOV-AUolOO0gwUwoAY4oAY!500x500.png.webp?_tm=3&v=1629427346" />
          <div>
            <van-goods-action>
              <van-goods-action-icon icon="like-o" text="收藏" @click="shouchang" />
              <van-goods-action-button type="warning" text="购物车" @click="addgwc1(3)" />
              <van-goods-action-button type="danger" text="购买" @click="GM(3)"  />
            </van-goods-action>
          </div>
        </van-popup>
      </div>
      <!-- ----------------------------------------商品3------------------------------------------------------- -->
      <!-- -----------------------------------------商品4------------------------------------------------------ -->
      <div>
        <van-cell is-link @click="showPopup4">
          <van-card price="99.00" desc="吹风机" title="吹风机"
            thumb="https://1.s91i.faiusr.com/4/AFsIABAEGAAgyKrC6AUo0P2lqwEwoAY4oAY!500x500.png.webp?_tm=3&v=1619318669"
            origin-price="299.00" />
        </van-cell>
        <van-popup v-model="show4" style="height: 400px; width: 375px">
          <van-image width="375" height="355"
            src="https://1.s91i.faiusr.com/4/AFsIABAEGAAgyKrC6AUo0P2lqwEwoAY4oAY!500x500.png.webp?_tm=3&v=1619318669" />
          <div>
            <van-goods-action>
              <van-goods-action-icon icon="like-o" text="收藏" @click="shouchang" />
              <van-goods-action-button type="warning" text="购物车" @click="addgwc1(4)" />
              <van-goods-action-button type="danger" text="购买" @click="GM(4)"  />
            </van-goods-action>
          </div>
        </van-popup>
      </div>
      <!-- ----------------------------------------商品4------------------------------------------------------- -->
      <!-- -----------------------------------------商品5------------------------------------------------------ -->
      <div>
        <van-cell is-link @click="showPopup5">
          <van-card price="99.00" desc="护肤品" title="护肤品"
            thumb="https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg36XJ_QUowKD26gQwoAY4oAY!500x500.png.webp?_tm=3&v=1629430591"
            origin-price="299.00" />
        </van-cell>
        <van-popup v-model="show5" style="height: 400px; width: 375px">
          <van-image width="375" height="355"
            src="https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg36XJ_QUowKD26gQwoAY4oAY!500x500.png.webp?_tm=3&v=1629430591" />
          <div>
            <van-goods-action>
              <van-goods-action-icon icon="like-o" text="收藏" @click="shouchang" />
              <van-goods-action-button type="warning" text="购物车" @click="addgwc1(5)" />
              <van-goods-action-button type="danger" text="购买" @click="GM(5)"  />
            </van-goods-action>
          </div>
        </van-popup>
      </div>
      <!-- ----------------------------------------商品5------------------------------------------------------- -->
    </div>

    <div style="height: 50px; clear: both"></div>
    <!-- 底部提高栏-->
    <van-action-sheet v-model="show1_d" title="确认订单">
      <div class="content">
        <van-divider></van-divider>
        <div>
          <div>￥99</div>
          <van-stepper v-model="value_1" />
          <!--步进器-->
        </div>
      </div>
      <van-button type="danger" round @click="q(1)" style="margin-left: 70%">立即支付</van-button>
    </van-action-sheet>
    <!-- ---------------------商品1---------------------------------      -->
    <van-action-sheet v-model="show2_d" title="确认订单">
      <div class="content">
        <van-divider></van-divider>
        <div>
          <div>￥198</div>
          <van-stepper v-model="value_1" @click="aaa" />
          <!--步进器-->
        </div>
      </div>
      <van-button type="danger" round @click="q(2)" style="margin-left: 70%">立即支付</van-button>
    </van-action-sheet>
    <!-- ---------------------商品2----------------------------------->
    <van-action-sheet v-model="show3_d" title="确认订单">
      <div class="content">
        <van-divider></van-divider>
        <div>
          <div>￥199</div>
          <van-stepper v-model="value_1" @click="aaa" />
          <!--步进器-->
        </div>
      </div>

      <van-button type="danger" round @click="q(3)" style="margin-left: 70%">立即支付</van-button>
    </van-action-sheet>
    <!-- ---------------------商品3---------------------------------      -->
    <van-action-sheet v-model="show4_d" title="确认订单">
      <div class="content">
        <van-divider></van-divider>
        <div>
          <div>￥98</div>
          <van-stepper v-model="value_1" @click="aaa" />
          <!--步进器-->
        </div>
      </div>

      <van-button type="danger" round @click="q(4)" style="margin-left: 70%">立即支付</van-button>
    </van-action-sheet>
    <!-- ---------------------商品4---------------------------------      -->
    <van-action-sheet v-model="show5_d" title="确认订单">
      <div class="content">
        <van-divider></van-divider>
        <div>
          <div>￥299</div>
          <van-stepper v-model="value_1" @click="aaa" />
          <!--步进器-->
        </div>
      </div>
      <van-button type="danger" round @click="q(5)" style="margin-left: 70%">立即支付</van-button>
    </van-action-sheet>
    <!-- ---------------------商品5---------------------------------      -->

  </div>
  <!-- end -->
</template>

<script>
import { Toast } from "vant";
import gwc from '@/api/gwc'
import order from '@/api/order'
export default {
  data() {
    return {
      goods: [
        {//----------------------1
          producename: '双肩包',
          price: 99,
          url: "https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119"
        },
        {//----------------------2
          producename: '双肩包2',
          price: 99,
          url: "https://1.s91i.faiusr.com/4/AFsIyY_KAhAEGAAg56abgwYogPetzwMwoAY4oAY!500x500.png.webp?_tm=3&v=1629432638"
        },
        {//---------------------3
          producename: '保温杯',
          price: 99,
          url: "https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg6OOV-AUolOO0gwUwoAY4oAY!500x500.png.webp?_tm=3&v=1629427346"
        },
        {//---------------------4
          producename: '吹风机',
          price: 99,
          url: "https://1.s91i.faiusr.com/4/AFsIABAEGAAgyKrC6AUo0P2lqwEwoAY4oAY!500x500.png.webp?_tm=3&v=1619318669"
        },
        {// ------------------5
          producename: '护肤品',
          price: 99,
          url: "https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg36XJ_QUowKD26gQwoAY4oAY!500x500.png.webp?_tm=3&v=1629430591"
        },
      ],
      userid: '',
      value_1: 1,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show22: false,
      show1_d: false,
      show2_d: false,
      show3_d: false,
      show4_d: false,
      show5_d: false,
      gwc: {
        uid: '',
        produce: '',
        price: '',
        num: '',
        url: ''
      },
      order: {
        uid: '',
        produce: '',
        url: ''
      }
    };
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.userid = this.$route.params.id
      console.log(this.userid)
    }
  },
  methods: {
    GM(num) {//购买
      if (num == 1) {
        this.order.produce = this.goods[0].producename
        this.order.uid = this.userid
        this.order.url = "https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119"
        order.addOder(this.order)
        Toast("购买成功1")
      }
      else if (num == 2) {
        this.order.produce = this.goods[1].producename
        this.order.uid = this.userid
        this.order.url = "https://1.s91i.faiusr.com/4/AFsIyY_KAhAEGAAg56abgwYogPetzwMwoAY4oAY!500x500.png.webp?_tm=3&v=1629432638"
        order.addOder(this.order)
        Toast("购买成功2")
      }
      else if (num == 3) {
        this.order.produce = this.goods[2].producename
        this.order.uid = this.userid
        this.order.url = "https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg6OOV-AUolOO0gwUwoAY4oAY!500x500.png.webp?_tm=3&v=1629427346"
        order.addOder(this.order)
        Toast("购买成功3")
      }
      else if (num == 4) {
        this.order.produce = this.goods[3].producename
        this.order.uid = this.userid
        this.order.url = "https://1.s91i.faiusr.com/4/AFsIABAEGAAgyKrC6AUo0P2lqwEwoAY4oAY!500x500.png.webp?_tm=3&v=1619318669"
        order.addOder(this.order)
        Toast("购买成功4")
      }
      else if (num == 5) {
        this.order.produce = this.goods[4].producename
        this.order.uid = this.userid
        this.order.url = "https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg36XJ_QUowKD26gQwoAY4oAY!500x500.png.webp?_tm=3&v=1629430591"
        order.addOder(this.order)
        Toast("购买成功5")
      }
    },
    showPopup1() {
      this.show1 = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    showPopup3() {
      this.show3 = true;
    },
    showPopup4() {
      this.show4 = true;
    },
    showPopup5() {
      this.show5 = true;
    },
    showPopup22() {
      this.show22 = true;
    },
    onSubmit() {
      this.showShare = true;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // -----------------------------------------添加订单 ↓--------------------------------------------------------
    q(num) {
      // this.like.push({
      //   id: this.like[this.like.length - 1].id + 1,
      //   a: "双肩包",
      //   b: "https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119",
      // });
      if (num === 1) {
        Toast("购买成功1");
      }
      else if (num === 2) {
        Toast("购买成功2");
      }
      else if (num === 3) {
        Toast("购买成功3");
      }
      else if (num === 4) {
        Toast("购买成功4");
      }
      else if (num === 5) {
        Toast("购买成功5");
      }
    },
    addgwc1(num) {
      // this.like.push({
      //   id: this.like[this.like.length - 1].id + 1,
      //   a: "双肩包",
      //   b: "https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119",
      // });
      if (num === 1) {
        Toast("加购成功1");
        this.gwc.price = this.goods[0].price
        this.gwc.produce = this.goods[0].producename
        this.gwc.num = 1
        this.gwc.uid = this.userid
        this.gwc.url = "https://1.s91i.faiusr.com/4/AFsIo4jwAhAEGAAgi7rFhwYo08Lh7AUwoAY4oAY!500x500.png.webp?_tm=3&v=1629437119"
        gwc.addGWC(this.gwc)
      }
      else if (num === 2) {
        Toast("加购成功2");
        this.gwc.price = this.goods[1].price
        this.gwc.produce = this.goods[1].producename
        this.gwc.num = 1
        this.gwc.uid = this.userid
        this.gwc.url = "https://1.s91i.faiusr.com/4/AFsIyY_KAhAEGAAg56abgwYogPetzwMwoAY4oAY!500x500.png.webp?_tm=3&v=1629432638"
        gwc.addGWC(this.gwc)
      }
      else if (num === 3) {
        Toast("加购成功3");
        this.gwc.price = this.goods[2].price
        this.gwc.produce = this.goods[2].producename
        this.gwc.num = 1
        this.gwc.uid = this.userid
        this.gwc.url = "https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg6OOV-AUolOO0gwUwoAY4oAY!500x500.png.webp?_tm=3&v=1629427346"
        gwc.addGWC(this.gwc)
      }
      else if (num === 4) {
        Toast("加购成功4");
        this.gwc.price = this.goods[3].price
        this.gwc.produce = this.goods[3].producename
        this.gwc.num = 1
        this.gwc.uid = this.userid
        this.gwc.url = "https://1.s91i.faiusr.com/4/AFsIABAEGAAgyKrC6AUo0P2lqwEwoAY4oAY!500x500.png.webp?_tm=3&v=1619318669"
        gwc.addGWC(this.gwc)
      }
      else if (num === 5) {
        Toast("加购成功5");
        this.gwc.price = this.goods[4].price
        this.gwc.produce = this.goods[4].producename
        this.gwc.num = 1
        this.gwc.uid = this.userid
        this.gwc.url = "https://1.s91i.faiusr.com/4/AFsIgbiaAhAEGAAg36XJ_QUowKD26gQwoAY4oAY!500x500.png.webp?_tm=3&v=1629430591"
        gwc.addGWC(this.gwc)
      }
    },
  },
};
</script>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  background-color: #39a9ed;
}

.content {
  padding: 16px 16px 160px;
}
</style>
